<template>
  <div class="article-container bs">
    <div class="header flex flex-jus">
      <div class="left flex flex-align-center">
        <el-input
          v-model="input3"
          placeholder="搜索查询文章"
          class="input-style mr-30"
        >
          <template #suffix>
            <img src="@/assets/img/icon/article/ss.svg" alt="" />
          </template>
        </el-input>
        <p class="cp c-active flex felx-align-cer">
          <img
            src="@/assets/img/icon/article/article-113.svg"
            class="mr-6"
            alt=""
          />
          <span>点击上传文章</span>
        </p>
      </div>
      <div class="right flex flex-align-center">
        <div
          class="text-center ml-38 cp"
          :class="tabIndex == index ? 'c-active' : 'c6'"
          v-for="(item, index) in tabList"
          :key="item"
          @click="changeTag(index)"
        >
          <p>{{ item.total }}</p>
          <p>{{ item.title }}</p>
        </div>
      </div>
    </div>
    <div class="content">
      <el-table
        :data="tableData"
        style="width: 100%"
        row-class-name="text-center"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column prop="title" label="标题" />
        <el-table-column
          prop="leavel"
          label="等级"
          width="120"
          :filters="[
            { text: '生活管理', value: '生活管理' },
            { text: '医学管理', value: '医学管理' }
          ]"
          :filter-method="filterTag"
          filter-placement="bottom-start"
        >
          <template #default="scope">
            {{ scope.row.leavel }}
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" />
        <el-table-column
          prop="status"
          label="状态"
          width="120"
          :filters="[
            { text: '审核成功', value: '审核成功' },
            { text: '审核失败', value: '审核失败' }
          ]"
          :filter-method="filterStatus"
          filter-placement="bottom-start"
        >
          <template #default="scope">
            {{ scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column label="编辑">
          <template #default="scope">
            <div class="flex flex-center cp">
              <i class="iconfont icon-active-93 fz-22 mr-30"></i>
              <i class="iconfont icon-article-94 fz-22 mr-30"></i>
              <el-popover
                placement="top-start"
                :width="160"
                v-model:visible="scope.row.visible"
              >
                <p>确定删除吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="scope.row.visible = false"
                    >取消</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    @click="scope.row.visible = false"
                    >确定</el-button
                  >
                </div>
                <template #reference>
                  <i
                    class="iconfont icon-active-95 fz-22 mr-30"
                    @click="scope.row.visible = true"
                  ></i>
                </template>
              </el-popover>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        background
        layout="prev, pager, next"
        :total="1000"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'article-page',
  components: {},
  setup() {
    let input3 = ref('')
    let tabIndex = ref(0)
    let changimg = ref(false)
    const tabList = ref([
      {
        total: 99,
        title: '正在审核'
      },
      {
        total: 10,
        title: '审核失败'
      },
      {
        total: 99,
        title: '审核成功'
      }
    ])
    const changeTag = (index: number) => {
      tabIndex.value = index
    }
    const filterTag = (value: string, row: { leavel: string }) => {
      return row.leavel === value
    }
    const filterStatus = (value: string, row: { status: string }) => {
      return row.status === value
    }
    return {
      input3,
      tabList,
      tabIndex,
      changimg,
      changeTag,
      filterTag,
      filterStatus,
      tableData: [
        {
          title: '中医不知道“血压”这个指标，能否治疗高血压呢？',
          leavel: '生活管理',
          created_at: '2021-11-11',
          status: '审核成功',
          visible: false
        },
        {
          title: '中医不知道“血压”这个指标，能否治疗高血压呢？',
          leavel: '生活管理',
          created_at: '2021-11-11',
          status: '审核成功',
          visible: false
        }
      ]
    }
  }
})
</script>

<style lang="less" scoped>
.article-container {
  background-color: #f7f9fe;
  padding: 60px 80px 58px;
  height: 100vh;
  .header {
    margin-bottom: 24px;
    .input-style {
      width: 474px;
      height: 36px;
    }
    :deep(.el-input__inner) {
      border-color: #679aff;
    }
  }
  .pagination {
    padding: 13px 0;
    text-align: center;
  }
  .posi {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    z-index: 99;
  }
}
:deep(.el-table td, .el-table th.is-leaf) {
  border-bottom: none;
}
:deep(.el-table th > .cell) {
  text-align: center;
}
:deep(.el-table .cell) {
  text-align: center;
}
:deep(.el-table tbody tr:hover > td) {
  background-color: #6daefe;
  color: #fff !important;
}
:deep(.el-table tbody .el-table_1_column_6) {
  color: #679aff;
}
</style>
